@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox">
		<div class="ibox-title">
			<h5>用户列表</h5>
		</div>
		<div class="ibox-content">
			<div class="m-b">
				<a href="{{url('admin/user/add')}}" class="btn btn-warning"><i class="fa fa-plus"></i> 新建用户</a>
        <a href="javascript:;" id="btnImport" class="btn btn-info m-l"><i class="fa fa-file-excel-o"></i> 用户导入</a>
			</div>
			<div id="tblDataList">
				<p class="ibox-loading-31"></p>
			</div>
		</div>
	</div>
</div>

<script id="tplDataList" type="text/html">
	<table class="table table-hover table-bordered">
		<thead>
			<tr>
				<th>#</th>
				<th>用户名</th>
				<th>姓名</th>
				<th>性别</th>
				<th>邮箱</th>
				<th>手机</th>
				<th>状态</th>
				<th width="160">创建时间</th>
				<th width="220"></th>
			</tr>
		</thead>
		<tbody>
			<%each data as row i%>
			<tr data-id="<%row.id%>">
				<td><%row.id%></td>
				<td><%row.username%></td>
				<td><%row.realname%></td>
				<td><%row.sex%></td>
				<td><%row.email%></td>
				<td><%row.mobile%></td>
				<td>
					<%if row.status==1 %>
					<i class="fa fa-check-circle fa-lg text-success"></i>
					<%else%>
					<i class="fa fa-times-circle fa-lg text-danger"></i>
					<%/if%>
				</td>
				<td><%row.created_at%></td>
				<td>
					<a href="javascript:;" class="m-r-xs js-avatar m-r" data-src="<%row.avatar%>">
						<i class="fa fa-camera-retro fa-lg"></i> 头像
					</a>
					<a href="javascript:;" class="m-r-xs js-edit m-r">
						<i class="fa fa-pencil-square fa-lg"></i> 编辑
					</a>
					<a href="javascript:;" class="m-r-xs js-del">
						<i class="fa fa-times-circle fa-lg"></i> 删除
					</a>
				</td>
			</tr>
			<%/each%>
		</tbody>
	</table>
	<div class="text-center"><%#page_str%></div>
</script>

<div id="bootstrapModal" class="modal fade"></div>

<script id="tplEditPanel" type="text/html">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">编辑用户</h4>
      </div>
      <div class="modal-body">
        <form id="frmEditUser" method="post" class="form-horizontal">
					<div class="form-group">
            <label class="col-sm-2 control-label">帐户</label>
            <div class="col-sm-4">
              <input type="hidden" name="id" value="<%id%>">
              <p class="form-control-static"><%username%></p>
            </div>
						<label class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-4">
							<input type="text" name="realname" value="<%realname%>" class="form-control">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">密码</label>
						<div class="col-sm-4">
							<input type="password" name="password" class="form-control">
						</div>
						<label class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-4">
							<input type="password" name="repassword" class="form-control">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-4">
							<input type="email" name="email" value="<%email%>" class="form-control">
						</div>
						<label class="col-sm-2 control-label">手机</label>
						<div class="col-sm-4">
							<input type="text" name="mobile" value="<%mobile%>" class="form-control">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">身份证号</label>
            <div class="col-sm-4">
              <input type="text" name="cardid" value="<%profile.cardid%>" class="form-control">
            </div>
						<div class="col-sm-2">
							<select name="status" class="form-control">
								<option value="1"<%if status==1%> selected<%/if%>>启用</option>
								<option value="0"<%if status==0%> selected<%/if%>>禁用</option>
							</select>
						</div>
						<div class="col-sm-2">
							<select name="sex" class="form-control">
								<option value="男"<%if sex=='男'%> selected<%/if%>>男</option>
                <option value="女"<%if sex=='女'%> selected<%/if%>>女</option>
								<option value="保密"<%if sex=='保密'%> selected<%/if%>>保密</option>
							</select>
						</div>
					</div>
				</form>
      </div>
      <div class="modal-footer">
        <button id="btnSaveUser" type="button" class="btn btn-primary btn-w-m"><i class="fa fa-save"></i> 保存修改</button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-power-off"></i> 关闭</button>
      </div>
    </div>
  </div>
</script>

<script id="tplAvatarPanel" type="text/html">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">查看头像</h4>
      </div>
      <div class="modal-body">
        <div id="avatarContainer">
          <img id="imgAvatar" src="<%src%>" class="img-thumbnail" />
          <div class="hr-line-dashed"></div>
          <button id="btnUploadAvatar" data-id="<%id%>" class="btn btn-primary">修改头像</button>
        </div>
        <div id="uploadswfContainer">
          <div id="flashContent"></div>
        </div>
      </div>
    </div>
  </div>
</script>

<script id="tplUploadFile" type="text/html">
  <form id="formUpfile" method="post" enctype="multipart/form-data" class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-3 control-label">模板文件</label>
      <div class="col-sm-9">
        <p class="form-control-static"><a href="{{asset('upload/users_template.xls')}}" target="_blank">[点击下载]</a></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">选择文件</label>
      <div class="col-sm-9">
        <input name="file1" type="file" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-9 col-sm-offset-3">
        <button type="submit" class="btn btn-primary btn-w-m"><i class="fa fa-upload"></i> 上传文件</button>
      </div>
    </div>
  </form>
</script>
@endsection

@section('pagescript')
<script src="{{asset('assets/models/userModel.js')}}"></script>
<script src="{{asset('assets/swfobject/swfobject.js')}}"></script>
<script>
	var artDialog;
	$("#side-menu li[rel='entrust']").addClass("active")
		.find("ul").addClass("in")
		.find("li[rel='2']").addClass("active");

	var filter = {limit:12, page:1, keyword:''};
	var renderList = function(data){
		userModel.getPageList(data, function(data){
			data.page_str = page(data.last_page, data.total, data.current_page);
			$("#tblDataList").html(template('tplDataList', data));
		}, failure);
	};
	renderList(filter);

	$("#tblDataList").delegate(".pagination a","click",function(){
		filter.page = $(this).attr("rel");
		renderList(filter);
	});

	$("#tblDataList").delegate('.js-edit', 'click', function(e){
		var id = $(this).parents('tr').eq(0).data('id');
		userModel.getinfo({'id':id}, function(data){
			$("#bootstrapModal").html(template('tplEditPanel', data)).modal();
		}, failure);
	});

	$('#bootstrapModal').delegate('#btnSaveUser', 'click', function(){
		var form = $('#frmEditUser')[0];
		if(form.password.value != form.repassword.value){
			alert('确认密码有误！');
			form.repassword.focus();
			return false;
		}
		userModel.update($(form).serialize(), function(data){
			$("#bootstrapModal").modal('hide');
			renderList(filter);
		}, function(data){
			alert(data.responseJSON);
		});
	});

	$('#bootstrapModal').on('hidden.bs.modal', function(e){
	  $(this).empty();
	});

  $("#btnImport").on("click", function(){
    artDialog = dialog({
      title: '导入用户',
      content: template("tplUploadFile")
    }).showModal();
  });

  $("body").delegate("#formUpfile", 'submit', function(){
    var file = this.file1.value;
    if (file == ""){
      alert("请选择上传文件！");
      return false;
    }
    if (file.lastIndexOf(".") == -1){
      alert("文件类型不正确！");
      return false;
    }
    var ext = file.substr(file.lastIndexOf(".") + 1).toLowerCase();
    if (ext != 'xls' && ext != 'xlsx'){
      alert('无效的文件类型！');
      return false;
    }
    var data = new FormData();
    data.append('file1', this.file1.files[0]);
    userModel.uploadExcelFile(data, function(result){
      artDialog.close().remove();
      renderList(filter);
    }, failure);
    return false;
  });

	$("#tblDataList").delegate('.js-avatar', 'click', function(e){
		var id = $(this).parents('tr').eq(0).data('id');
		var src = $(this).data('src');
		$("#bootstrapModal").html(template('tplAvatarPanel', {'id':id, 'src':src})).modal();
	});

	$('#bootstrapModal').delegate('#btnUploadAvatar', 'click', function(){
		loadAvatarSwf($(this).data('id'));
	});

	$("#tblDataList").delegate('.js-del', 'click', function(e){
		var id = $(this).parents('tr').eq(0).data('id');
		dialog({
			content:'<i class="fa fa-info-circle"></i> 确定要删除此用户吗？',
			ok:function(){
				userModel.delete({'id':id}, function(){
					$(e.target).parents("tr").remove();
				}, failure);
			},
			cancel: true
		}).showModal();
	});

	var loadAvatarSwf = function(id){
		var flashObject = document.getElementById('flashContent');
    if(!flashObject){
      $('#uploadswfContainer').html('<div id="flashContent"></div>')
    }
    $('#avatarContainer').hide();
    var xiSwfUrlStr = "/libs/iemaker/expressInstall.swf";
    var flashvars = {
      "jsfunc": "uploadAvatar",
      "imgUrl": $("#imgAvatar").attr("src"),
      "uploadSrc": true,
      "showBrow": true,
      "showCame": true,
      "pSize": "300|300|180|180|80|80",
      "uploadUrl": "/admin/user/upload-avatar/"+id+"?_token={{ csrf_token() }}"
    };
    var params = {
      menu: "false",
      scale: "noScale",
      allowFullscreen: "true",
      allowScriptAccess: "always",
      wmode:"transparent",
      bgcolor: "#FFFFFF"
    };
    var attributes = {'id':"FaustCplus"};
    swfobject.embedSWF("/assets/iemaker/FaustCplus.swf", "flashContent", "650", "450", "9.0.0", xiSwfUrlStr, flashvars, params, attributes);
    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
	};

	var uploadAvatar = function(data){
		if(data.status == "1"){
      var timenow = Math.ceil(new Date().getTime() / 1000);
      var src = data.url+'?'+timenow;
      $("#uploadswfContainer").empty();
      $("#imgAvatar").attr("src", src);
      $('#avatarContainer').show();
    }else{
      alert(data.info);
    }
	};
</script>
@endsection